import React, {Fragment, useRef, useState, useEffect} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import PropTypes from 'prop-types';
import {faSearch, faTimes, faBook} from "@fortawesome/free-solid-svg-icons";
import "./index.scss"
import useKeyPress from "../../hooks/useKeyPress";

/*
@name: InputSearch
@description: 顶部搜索框 onFileSearch（callback）
@author: ChangHao
@time: 2020-11-09 10:33:46
*/
const InputSearch = ({title, onFileSearch}) => {
    const inputRef = useRef(null);
    const [inputActive, toggleSearchStatus] = useState(false);
    const [searchValue, setSearchValue] = useState("");
    const enterPress = useKeyPress(13);
    const escPress = useKeyPress(27);
    const closeSearch = () => {
        toggleSearchStatus(false);
        setSearchValue("");
    };
    useEffect(() => {
        if (enterPress) {
            onFileSearch(searchValue);
        }
        if (escPress && inputActive) {
            closeSearch();
        }
        // const inputEventHandler = (event) => {
        //     const {keyCode} = event;
        //     if (keyCode === 13) {
        //         event.preventDefault();
        //         onFileSearch(searchValue);
        //     } else if ((keyCode === 27) & inputActive) {
        //         closeSearch(event);
        //     }
        // };
        // document.addEventListener("keyup", inputEventHandler);
        // return () => {
        //     document.removeEventListener("keyup", inputEventHandler);
        // };
    }, [searchValue, enterPress, escPress]);
    useEffect(() => {
        if (inputActive) {
            inputRef.current.focus();
        }
    }, [inputActive]);
    return (
        <Fragment>
            {inputActive && (
                <div className="d-flex justify-content-between align-items-center fileSearchWrap">
                    <input
                        type="text"
                        ref={inputRef}
                        className="form-control  col-9"
                        placeholder="回车搜索文档..🔍"
                        onChange={(e) => setSearchValue(e.target.value)}
                    />
                    <button
                        type="button"
                        className="self-button  col-3"
                        onClick={closeSearch}
                    >
                        <FontAwesomeIcon icon={faTimes} color='#004085'/>
                    </button>
                </div>
            )}
            {!inputActive && (
                <div className="d-flex justify-content-between  fileSearchWrap align-items-center">
                    <FontAwesomeIcon icon={faBook} color='#ff8e87' size="2x"/>
                    <h5 className="col-8">{title}</h5>
                    <button
                        type="button"
                        className="self-button  col-3 "
                        onClick={() => toggleSearchStatus(true)}
                    >
                        <FontAwesomeIcon icon={faSearch} color='#004085'/>
                    </button>
                </div>
            )}
        </Fragment>
    );
};
InputSearch.propTypes = {
    title: PropTypes.string,
}
InputSearch.defaultProps = {
    title: "我的云文档"
}
export default InputSearch;
